<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="6" :sm="24">
              <a-form-item label="用户昵称">
                <a-input allowClear placeholder="用户昵称" v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="手机号码">
                <a-input allowClear placeholder="手机号码" v-model="queryParam.phone"></a-input>
              </a-form-item>
            </a-col>

            <a-col :md="8" :sm="24">
              <a-form-item label="起止时间">
                <a-range-picker v-model="queryParam.dateTime" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="onSearch(true)">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>

    <a-card :border="false">
      <STable ref="table" size="default" :columns="columns" :data="loadData">
        <div class="flex-y-center" slot="userInfo" slot-scope="text, item">
          <img class="user-head" :src="item.avatar_url" alt="" />
          <div class="flex-w-1" style="margin-left: 10px">
            <div>{{ item.nickname }}</div>
            <div>{{ item.binding }}</div>
          </div>
        </div>
        <span slot="state" slot-scope="state">
          <a-badge v-if="state == 1" status="success" text="已启用"></a-badge>
          <a-badge v-else status="default" text="已禁用"></a-badge>
        </span>
        <span slot="operation" slot-scope="item, key">
          <a-button @click="showModal(key)" type="link">查看记录</a-button>
        </span>
      </STable>

      <a-modal
        width="600px"
        :title="`${checkItem.nickname}的聊天记录`"
        :visible="visible"
        @ok="visible = flase"
        @cancel="visible = false"
      >
        <div v-scroll-bottom="getUserQaList" class="list">
          <div v-for="(item, i) in userData.data" :key="i">
            <div class="item">
              <div class="date">{{ item.created_at }}</div>
              <div class="jd"></div>
              <div class="content">{{ item.question }}</div>
            </div>
            <div class="item">
              <div class="date">{{ item.answer_time }}</div>
              <div class="jd jd-1"></div>
              <div class="content">{{ item.answer || "未回答" }}</div>
            </div>
          </div>
        </div>
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import ChartGptApi from '@/api/chartGpt'
import STable from '@/components/Table'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 100,
  },
  {
    title: '用户信息',
    width: 300,
    scopedSlots: { customRender: 'userInfo' },
  },
  {
    title: '消耗积分',
    dataIndex: 'sum_integral',
    customRender: (text) => text + '积分',
    sorter: (a, b) => a.sum_integral - b.sum_integral,
  },
  {
    title: '问答时间',
    dataIndex: 'created_at',
    sorter: (a, b) => Number(new Date(a.created_at)) - Number(new Date(b.created_at)),
  },

  {
    title: '操作',
    dataIndex: 'operation',
    width: 120,
    scopedSlots: { customRender: 'operation' },
  },
]

export default {
  directives: {
    'scroll-bottom': {
      bind: function (el, binding) {
        var isLoad = false
        el.addEventListener('scroll', function () {
          if (el.scrollTop + el.clientHeight + 100 >= el.scrollHeight) {
            if (!isLoad) {
              isLoad = true
              binding.value().then(() => {
                isLoad = false
              })
            }
          }
        })
      },
    },
  },
  components: {
    STable,
  },
  data() {
    return {
      columns,
      queryParam: {
        name: '',
        phone: '',
        dateTime: [],
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: async (parameter) => {
        console.log(parameter)
        var formData = Object.assign(parameter, this.queryParam)
        const res = await ChartGptApi.qaLogUserList(formData)
        console.log(res.data, 'loadData1')

        return res.data
      },
      visible: false,
      checkItem: {},
      userData: {
        data: [],
        pageNo: 1,
        loadMore: true,
      },
    }
  },
  created() {},
  methods: {
    onSearch(type = false) {
      this.$refs.table.refresh(type)
    },
    showModal(item) {
      this.visible = !this.visible
      this.userData = this.$options.data().userData
      this.checkItem = item
      console.log(123)
      this.getUserQaList()
    },
    async getUserQaList(fn) {
      if (!this.userData.loadMore) return
      var formData = {
        pageNo: this.userData.pageNo,
        pageSize: 10,
        user_id: this.checkItem.id,
      }
      const res = await ChartGptApi.qaLogQList(formData)
      this.userData.data.push(...res.data.data)
      this.userData.loadMore = this.userData.data.length < res.data.totalCount
      fn && fn()
    },
  },
}
</script>

<style lang="scss" scoped>
.user-head {
  width: 50px;
  height: 50px;
  border-radius: 4px;
}

.list {
  min-height: 40vh;
  max-height: 60vh;
  overflow-y: scroll;
  .item {
    display: flex;
    margin-bottom: 10px;

    .jd {
      position: relative;
      margin: 0 10px;
      min-height: 60px;
      width: 1px;
      &::after {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 3px solid #1890ff;
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(0, 10px);
        height: calc(100% + 10px);
        width: 1px;
        background: #ccc;
      }
    }

    .jd-1 {
      &::after {
        border-color: #52c41a;
      }
    }
    .content {
      width: 0;
      flex: 1;
    }

  }

  >div:nth-last-child(1) {
    >.item:nth-last-child(1) {
      .jd {
        height: 0;
        min-height: initial;
      }
    }
  }
}
</style>
